<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootsttrap/css/bootstrap.min.css">
    <script src="../jquery-3.6.0.js"></script>
    <style>
        .right {
            float: right;
            margin-right: 20px;
        }

        /* .list{
            display: flex;
            flex-wrap: wrap;
        } */
        .piccc {
            width: 200px;
            height: 200px;
        }

        .lists {
            height: 400px;
        }

        .addname,
        .rename {
            float: right;
        }

        .goto {
            cursor: pointer;
        }
        .kind{
            display: flex;
            justify-content: space-around;
        }
        .kind-class{
            width:190px;
            height: 200px;
            /* background-color: aquamarine; */
        }
        /* .kind-class:nth-child(3){
            background-color: brown;
        } */
        .goods{
            width: 100%;
            height: 200px;
            /* overflow: auto; */
        }
        .kind{
            width: 100%;
            height: 200px;
            
        }

        .jvzhong{
            text-align: center;
        }
        .list{
            width: 100%;
        }
        .lll{
            background-color: red;
        } 
    </style>
</head>

<body>
    
        <!-- 导航条 -->
        <ol class="breadcrumb">
            <li><a href="#">商标</a></li>
            <li><input type="text" placeholder="请输入想输入的商品" class="search"></li>
            <li><button class="button">搜索</button></li>

            <li class="right"><a href="#" class="addname">登录</a><a href="#" class="rename">退出</a></li>
            <li class="active right goto">购物车</li>
            <li class="active right">设置</li>
        </ol>
        <!-- 商品分类 -->
    <div class="goods">
        <h3>商品分类</h3>
        <div class="kind">
            
        </div>
        <!-- </div> -->
        <!-- 商品列表 -->
        <div class="row list">

        </div>
        <script>
            //初始化进入页面
            function a() {
                $.ajax({
                    type: 'post',
                    url: "https://api.it120.cc/conner/shop/goods/list/v2",
                    data: {}
                }).then(function b(res) {
                    console.log(res);
                    var num = res.data.result
                    var str = ''
                    num.forEach((item) => {
                        str += ` <div class="col-sm-4 col-md-3">
            <div class="thumbnail lists" data-id='${item.id}'>
                <img src="${item.pic}" alt="..." class='piccc' style="width:200px;height:200px">
                <div class="caption">
                  <h3>${item.name}</h3>
                  <p>原价：${item.minPrice}</p>
                  <p>现价：${item.originalPrice}</p>
                  <p><a href="#" class="btn btn-primary" role="button">添加收藏</a> 
                   <a href="#" class="btn btn-default shop" role="button">添加购物车</a>
                  </p>
                </div>
              </div>
        </div>`
                    });
                    document.querySelector('.list').innerHTML = str
                })
            }
            a()
            //点击搜索
            $(".list").on('click', '.lists', function () {
                console.log($(this).attr('data-id'))
                var id = $(this).attr('data-id')

                //跳转购物车页面
                location.href = `./detail.html?id=${id}`
                // sessionStorage.setItem('id',id)
                // location.href='./detail.html'
            })
            //首页登录功能
            var code = localStorage.getItem('code')
            if (code == 0) {
                $('.addname').css('display', 'none')
                $('.rename').css('display', 'block').click(function () {
                    localStorage.removeItem('code')
                    history.go(0)
                })


            } else {
                $('.rename').css('display', 'none')
                $('.addname').css('display', 'block')
                $('.addname').click(function () {
                    location.href = './login.html'
                })
            }


            //添加搜索功能
            $(".button").click(function () {
                $('.search').val()
                $.ajax({
                    type: 'post',
                    url: 'https://api.it120.cc/conner/shop/goods/list/v2',
                    data: {
                        k: $('.search').val()
                    }
                }).then(function e(res) {
                    console.log(res);
                    // console.log(res.data.result)
                    var str = ''
                    if(res.code==0){
                        console.log(1);
                        res.data.result.forEach(item => {
                        str += ` <div class="col-sm-4 col-md-3">
                                   <div class="thumbnail lists" data-id='${item.id}'>
                                    <img src="${item.pic}" alt="..." class='piccc'>
                                    <div class="caption">
                                    <h3>${item.name}</h3>
                                    <p>原价：${item.minPrice}</p>
                                    <p>现价：${item.originalPrice}</p>
                                    <p><a href="#" class="btn btn-primary" role="button">添加收藏</a> 
                                    <a href="#" class="btn btn-default shop" role="button">添加购物车</a>
                                </p>
                            </div>
                           </div>
                          </div>`
                         })
                    }else{
                        console.log(999)
                        str='没有此商品'
                    }
                    
                    document.querySelector('.list').innerHTML = str
                })
            })
            //进入购物车
            $('.goto').click(function () {
                var code=localStorage.getItem('code')
                if(code==0){
                    location.href = './cart.html'
                }else{
                    location.href='./login.html'
                }
                
            })
            //商品分类
            $.ajax({
                type:'get',
                url:'https://api.it120.cc/conner/shop/goods/category/all',
                data:{
                    
                }
            }).then(function gg(res){
                console.log(res)
                var str=''
                res.data.forEach((item,index)=>{
                    console.log(item);
                    // console.log(item.id);
                    if(index==0){
                        str+=`<div>
                            <div>
                               <img src="${item.icon}" style="width:150px ;height:180px"class="kind-class lll" id="${item.id}">
                            </div>
                               <div class='jvzhong'>${item.name}</div> 
                            </div> `
                    }else{
                        str+=`<div>
                            <div>
                               <img src="${item.icon}" style="width:150px ;height:180px"class="kind-class" id="${item.id}">
                            </div>
                               <div class='jvzhong'>${item.name}</div> 
                            </div> `
                    }
                    
                    // console.log(str)
                })
                // console.log(str)
                // document.querySelector('.kind').innerHTML=str
                document.querySelector('.kind').innerHTML=str
            })
            // 分类详情
            $('.kind').on('click','.kind-class',function(){
                $('.kind-class').each((index,item)=>{
                    // console.log(item);
                    item.classList.remove('lll')
                    // console.log(index);
                })
                this.classList.add('lll')

                // console.log($(this).attr('id'))
                // console.log($(this).siblings());
                // $(this).siblings().removeClass('.lll')
                // $(this).addClass('.lll')
                $.ajax({
                    type: 'post',
                    url: "https://api.it120.cc/conner/shop/goods/list/v2",
                    data: {
                        categoryId:$(this).attr('id')
                    }
                }).then(function(res){
                    console.log(res)
                    // var num = res.data.result
                    var str = ''
                    console.log(res.code);
                    if(res.code==0){
                        res.data.result.forEach((item) => {
                        str += ` <div class="col-sm-4 col-md-3">
                            <div class="thumbnail lists" data-id='${item.id}'>
                               <img src="${item.pic}" alt="..." class='piccc'>
                                     <div class="caption">
                                     <h3>${item.name}</h3>
                                     <p>原价：${item.minPrice}</p>
                                     <p>现价：${item.originalPrice}</p>
                                      <p><a href="#" class="btn btn-primary" role="button">添加收藏</a> 
                                       <a href="#" class="btn btn-default shop" role="button">添加购物车</a>
                                   </p>
                                </div>
                          </div>
                          </div>`
                });
                       
                    }else{ 
                        str='暂无商品'
                    }
                    document.querySelector('.list').innerHTML = str
                })
            })

        </script>
</body>

</html>